<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router/index'
import { get, post } from '@/myaxios'

/**
 * 游戏区服管理
 */
const serverDrawer = ref(false)
const serverInnerDrawer = ref(false)
const serverTableList = reactive({ tableData: [] })
const serverAddForm = reactive({
  gameId: '',
  gameServerId: '',
  gameServerName: '',
  gameName: ''
})

const serverFormOpen = async (currentRow) => {
  serverDrawer.value = true
  console.log(currentRow)
  serverAddForm.gameId = currentRow.gameId
  serverAddForm.gameName = currentRow.gameName
  const resp = await get(`gameServer/query`, { gameId: currentRow.gameId })
  if (resp.data.code === 2000) {
    serverTableList.tableData = resp.data.returnData || []
  } else if (resp.data.code === 2001) {
    serverTableList.tableData = []
  }
}

const serverAddOpen = () => {
  serverInnerDrawer.value = true
  serverAddForm.gameServerId = ''
  serverAddForm.gameServerName = ''
}

const serverAddSubmit = async () => {
  serverInnerDrawer.value = false
  const addResp = await post(`gameServer/add`, serverAddForm)
  if (addResp.data.code === 2010) {
    ElMessage.success(addResp.data.msg)
  } else if (addResp.data.code === 2011) {
    ElMessage.error(addResp.data.msg)
  }

  const resp = await get(`gameServer/query`, { gameId: serverAddForm.gameId })
  if (resp.data.code === 2000) {
    serverTableList.tableData = resp.data.returnData || []
  } else if (resp.data.code === 2001) {
    serverTableList.tableData = []
  }
}

const deleteServer = async (currentRow) => {
  const delResp = await post(`gameServer/delete`, { gameServerId: currentRow.gameServerId })
  if (delResp.data.code === 2010) {
    ElMessage.success(delResp.data.msg)
  } else if (delResp.data.code === 2011) {
    ElMessage.error(delResp.data.msg)
  }

  const resp = await get(`gameServer/query`, { gameId: serverAddForm.gameId })
  if (resp.data.code === 2000) {
    serverTableList.tableData = resp.data.returnData || []
  } else if (resp.data.code === 2001) {
    serverTableList.tableData = []
  }
}

/**
 * 游戏段位管理
 */
const levelInnerDrawer = ref(false)
const levelDrawer = ref(false)
const levelTableList = reactive({ tableData: [] })
const levelAddForm = reactive({
  gameId: '',
  gameLevelId: '',
  gameLevelName: '',
  gameName: ''
})

const levelFormOpen = async (currentRow) => {
  levelDrawer.value = true
  levelAddForm.gameId = currentRow.gameId
  levelAddForm.gameName = currentRow.gameName
  const resp = await get(`gameLevel/query`, { gameId: currentRow.gameId })
  if (resp.data.code === 2000) {
    levelTableList.tableData = resp.data.returnData || []
  } else if (resp.data.code === 2001) {
    levelTableList.tableData = []
  }
}

const levelAddOpen = () => {
  levelInnerDrawer.value = true
  levelAddForm.gameLevelId = ''
  levelAddForm.gameLevelName = ''
}

const levelAddSubmit = async () => {
  levelInnerDrawer.value = false
  const addResp = await post(`gameLevel/add`, levelAddForm)
  if (addResp.data.code === 2010) {
    ElMessage.success(addResp.data.msg)
  } else if (addResp.data.code === 2011) {
    ElMessage.error(addResp.data.msg)
  }

  const resp = await get(`gameLevel/query`, { gameId: levelAddForm.gameId })
  if (resp.data.code === 2000) {
    levelTableList.tableData = resp.data.returnData || []
  } else if (resp.data.code === 2001) {
    levelTableList.tableData = []
  }
}

const deleteLevel = async (currentRow) => {
  const delResp = await post(`gameLevel/delete`, { gameLevelId: currentRow.gameLevelId })
  if (delResp.data.code === 2010) {
    ElMessage.success(delResp.data.msg)
  } else if (delResp.data.code === 2011) {
    ElMessage.error(delResp.data.msg)
  }

  const resp = await get(`gameLevel/query`, { gameId: levelAddForm.gameId })
  if (resp.data.code === 2000) {
    levelTableList.tableData = resp.data.returnData || []
  } else if (resp.data.code === 2001) {
    levelTableList.tableData = []
  }
}

/**
 * 游戏管理 - 删除 / 修改 / 添加
 */
const deleteFormOpen = async (currentRow) => {
  ElMessageBox.confirm(
    `确定要删除 ID为[${currentRow.gameId}]的游戏数据么`,
    '注意',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      operationData("games/delete", { gameId: currentRow.gameId })
    })
    .catch(() => {
      console.log("取消删除");
    })
}

const editDialogVisible = ref(false)
const editForm = reactive({
  editData: {
    gameId: '',
    gameName: ''
  }
})
const editFormRef = ref()

const editFormSubmit = async () => {
  operationData("games/edit", editForm.editData)
  editDialogVisible.value = false
}

const editFormOpen = async (currentRow) => {
  editDialogVisible.value = true
  const resp = await get("games/getGameById", { gameId: currentRow.gameId })
  if (resp.data.code === 2000) {
    editForm.editData = resp.data.returnData
  }
}

const addDialogVisible = ref(false)
const addFormRef = ref()
const addForm = reactive({
  gameName: ''
})

const addFormSubmit = async () => {
  operationData("games/add", addForm)
  addDialogVisible.value = false
}

const addFormOpen = () => {
  addDialogVisible.value = true
  nextTick(() => {
    addFormRef.value.resetFields()
  })
}

/**
 * 查询和分页逻辑
 */
const queryForm = reactive({
  gameName: ''
})
const queryFormRef = ref()

const onSubmit = () => {
  queryData(queryForm)
}
const onReset = () => {
  queryFormRef.value.resetFields()
  queryData({})
}

const pageInfo = reactive({
  pageData: {
    page: 1,
    pageSize: 10,
    total: 77
  }
})

const handleCurrentChange = (val) => {
  pageInfo.pageData.page = val
  const paramsObj = { ...pageInfo.pageData, ...queryForm }
  queryData(paramsObj)
}

const handleSizeChange = (val) => {
  pageInfo.pageData.page = 1
  pageInfo.pageData.pageSize = val
  const paramsObj = { ...pageInfo.pageData, ...queryForm }
  queryData(paramsObj)
}

const tableList = reactive({ tableData: [] })

const queryData = async (params) => {
  const paramsObj = { ...pageInfo.pageData, ...params }
  const resp = await get("/games/query", paramsObj)
  if (resp.data.code === 2000) {
    tableList.tableData = resp.data.returnData || []
    Object.assign(pageInfo.pageData, resp.data.pageInfo)
  } else if (resp.data.code === 2001) {
    tableList.tableData = []
    Object.assign(pageInfo.pageData, { page: 1, pageSize: 10, total: 0 })
  }
}

const operationData = async (url, params) => {
  const resp = await post(url, params)
  if (resp.data.code === 2010) {
    ElMessage.success(resp.data.msg)
  } else if (resp.data.code === 2011) {
    ElMessage.error(resp.data.msg)
  } else if (resp.data.code === 2012) {
    ElMessage.warning('删除游戏前请删除区服/段位数据')
  }

  const paramsObj = { ...pageInfo.pageData, ...queryForm }
  await queryData(paramsObj)
}

onMounted(() => {
  queryData({})
})
</script>

<template>
  <el-form ref="queryFormRef" :inline="true" :model="queryForm">
    <el-form-item label="游戏名称" prop="gameName">
      <el-input v-model="queryForm.gameName" placeholder="gameName" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" plain @click="onSubmit">查询</el-button>
      <el-button type="primary" plain @click="onReset">重置</el-button>
      <el-button type="primary" plain @click="addFormOpen">添加</el-button>

    </el-form-item>
  </el-form>


  <el-table ref="tableRef" :data="tableList.tableData" style="width: 100%">
    <el-table-column fixed prop="gameId" label="游戏编号" width="180" />

    <el-table-column prop="gameName" label="游戏名称">
      <template #default="scope">
        <el-tag>{{ scope.row.gameName }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="区服信息">
      <template #default="scope">
        <el-button color="#626aef" plain @click="serverFormOpen(scope.row)">区服信息</el-button>
        <!-- <el-button type="danger" @click="deleteFormOpen(scope.row)">删除</el-button> -->
      </template>

    </el-table-column>
    <el-table-column label="段位信息">
      <template #default="scope">
        <el-button color="#626aef" plain @click="levelFormOpen(scope.row)">段位信息</el-button>
        <!-- <el-button type="danger" @click="deleteFormOpen(scope.row)">删除</el-button> -->
      </template>

    </el-table-column>

    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button type="primary" plain @click="editFormOpen(scope.row)">修改</el-button>
        <el-button type="primary" plain @click="deleteFormOpen(scope.row)">删除</el-button>
      </template>

    </el-table-column>


  </el-table>

  <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
    :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <!-- 添加对话框 -->
  <el-dialog v-model="addDialogVisible" title="添加" width="500">
    <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 400px">

      <el-form-item label="游戏名称" prop="gameName">
        <el-input v-model="addForm.gameName" placeholder="gameName" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="editDialogVisible" title="修改" width="500">
    <el-form ref="editFormRef" :model="editForm.editData" label-width="auto" style="max-width: 400px">
      <el-form-item label="游戏编号" prop="gameId">
        <el-input v-model="editForm.editData.gameId" disabled placeholder="gameId" />
      </el-form-item>
      <el-form-item label="游戏名称" prop="gameName">
        <el-input v-model="editForm.editData.gameName" placeholder="gameName" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 区服抽屉 -->
  <el-drawer v-model="serverDrawer" title="游戏区服管理" :direction="'btt'" size="70%">
    <el-divider content-position="left"><el-text type="primary" size="large">{{ serverAddForm.gameName }}</el-text>
    </el-divider>
    <el-button type="primary" @click="serverAddOpen">添加区服</el-button>
    <el-drawer v-model="serverInnerDrawer" title="添加" :direction="'btt'" :append-to-body="true" size="60%">
      <el-form :inline="true"  :model="serverAddForm" label-width="auto">
        <el-form-item label="游戏编号" prop="gameId">
          <el-input v-model="serverAddForm.gameId" disabled placeholder="gameId" />
        </el-form-item>
        <el-form-item label="区服编号" prop="gameServerId">
          <el-input v-model="serverAddForm.gameServerId" placeholder="gameServerId" />
        </el-form-item>
        <el-form-item label="区服名称" prop="gameServerName">
          <el-input v-model="serverAddForm.gameServerName" placeholder="gameServerName" />
        </el-form-item>
        <el-form-item>
          <el-button @click="serverInnerDrawer = false">取消</el-button>
          <el-button type="primary" @click="serverAddSubmit">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>


    <el-table :data="serverTableList.tableData" style="width: 100%">
      <el-table-column fixed prop="gameId" label="游戏编号" width="180" />

      <el-table-column prop="serverId" label="区服编号">
        <template #default="scope">
          <el-tag>{{ scope.row.serverId }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="serverName" label="区服名称">
        <template #default="scope">
          <el-tag>{{ scope.row.serverName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" plain @click="deleteServer(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-drawer>
  <!-- 段位抽屉 -->
  <el-drawer v-model="levelDrawer" title="游戏段位管理" :direction="'btt'" size="70%">
    <el-divider content-position="left"><el-text type="primary" size="large">{{ levelAddForm.gameName }}</el-text>
    </el-divider>
    <el-button type="primary" @click="levelAddOpen">添加段位</el-button>
    <el-drawer v-model="levelInnerDrawer" title="添加" :direction="'btt'" :append-to-body="true" size="60%">
      <el-form :inline="true" :model="levelAddForm" label-width="auto">
        <el-form-item label="游戏编号" prop="gameId">
          <el-input v-model="levelAddForm.gameId" disabled placeholder="gameId" />
        </el-form-item>
        <el-form-item label="段位编号" prop="gameLevelId">
          <el-input v-model="levelAddForm.gameLevelId" placeholder="gameLevelId" />
        </el-form-item>
        <el-form-item label="段位名称" prop="gameLevelName">
          <el-input v-model="levelAddForm.gameLevelName" placeholder="gameLevelName" />
        </el-form-item>
        <el-form-item>
          <el-button @click="levelInnerDrawer = false">取消</el-button>
          <el-button type="primary" @click="levelAddSubmit">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>



    <el-table :data="levelTableList.tableData" style="width: 100%">
      <el-table-column fixed prop="gameId" label="游戏编号" width="180" />

      <el-table-column prop="gameLevelId" label="段位编号">
        <template #default="scope">
          <el-tag>{{ scope.row.gameLevelId }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gameLevelName" label="段位名称">
        <template #default="scope">
          <el-tag>{{ scope.row.gameLevelName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" plain @click="deleteLevel(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-drawer>


</template>

<style scoped></style>